<!-- 收件地址列表 -->
<template>
  <s-layout :bgStyle="{ color: '#FFF' }" title="邀请绑定">
    <view class="bg-white ss-p-x-30 border-bottom m-30">
      <view label="" class="form-item">我的邀请码:</view>
      <view class="ss-flex ss-align-center">
        <text class="ss-text">{{ userInfo.inviteCode }}</text>
        <button class="ss-m-t-40 ss-reset-button join-btn" @click="copyInviteCode"
          >复制邀请码</button
        >
      </view>
    </view>
    <uni-forms
      v-if="status === 'edit'"
      ref="agentFormRef"
      v-model="state"
      :rules="rules"
      validateTrigger="bind"
      labelWidth="160"
      labelAlign="left"
      border
      :labelStyle="{ fontWeight: 'bold' }"
    >
      <view class="bg-white form-box ss-p-x-30">
        <uni-forms-item name="inviteCode" label="绑定邀请码" class="form-item">
          <uni-easyinput
            v-model="state.inviteCode"
            placeholder="输入绑定的邀请码"
            :inputBorder="false"
          />
        </uni-forms-item>
      </view>
    </uni-forms>
    <view v-if="status === 'view'" class="bg-white ss-p-x-30 m-30">
      <view label="" class="mb-30">我的邀请人:</view>
      <view class="left-box ss-flex ss-col-center">
        <view class="avatar-box ss-m-r-24">
          <image
            class="avatar-img"
            :src="
              inviteUserInfo.avatar
                ? sheep.$url.cdn(inviteUserInfo.avatar)
                : sheep.$url.static('/static/img/shop/default_avatar.png')
            "
            mode="aspectFill"
          >
          </image>
        </view>
        <view>
          <view class="nickname-box ss-flex ss-col-center">
            <view class="nick-name ss-m-r-20"
              >{{ inviteUserInfo?.nickname }}（邀请码：{{ inviteUserInfo.inviteCode }}）</view
            >
          </view>
        </view>
      </view>
    </view>
    <su-fixed
      v-if="status === 'edit'"
      bottom
      :opacity="false"
      bg=""
      placeholder
      :noFixed="false"
      :index="10"
    >
      <view class="footer-box ss-flex-col ss-row-between ss-p-20">
        <view class="ss-m-b-20">
          <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onSave">保存</button>
        </view>
      </view>
    </su-fixed>
  </s-layout>
</template>

<script setup>
  import { reactive, ref, unref, computed } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import UserApi from '@/sheep/api/member/user';
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const status = ref('view');
  const inviteUserInfo = ref({
    nickname: '',
    avatar: '',
    inviteCode: '',
  });
  const agentFormRef = ref(null);
  const rules = {
    inviteCode: {
      rules: [
        {
          required: true,
          trigger: 'blur',
          errorMessage: '输入绑定的邀请码',
        },
      ],
    },
  };

  const state = reactive({
    inviteCode: '', // 邀请码
  });
  onLoad(() => {
    getinviteUser();
  });
  const getinviteUser = async () => {
    const res = await UserApi.getInviteUserInfo();
    console.log('====', res);
    if (res.code !== 0) {
      return;
    }
    if (res.data&&res.data.inviteCode) {
      status.value = 'view';
      inviteUserInfo.value.inviteCode = res.data.inviteCode;
      inviteUserInfo.value.avatar = res.data.avatar;
      inviteUserInfo.value.nickname = res.data.nickname;
    } else {
      status.value = 'edit';
    }
  };
  // 保存收货地址
  const onSave = async () => {
    // 参数校验
    const validate = await unref(agentFormRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) {
      return;
    }

    // 提交请求
    const res = await UserApi.saveInviteCode(state);
    console.log('====', res);
    if (res.code !== 0) {
      return;
    }
    status.value = 'view';
    getinviteUser();
  };
  const copyInviteCode = () => {
    sheep.$helper.copyText(`当前账号的邀请码为【${userInfo.value.inviteCode}】`);
  };
</script>

<style lang="scss" scoped>
  .footer-box {
    .add-btn {
      flex: 1;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 80rpx;
      color: $white;
      position: relative;
      z-index: 1;
    }

    .sync-wxaddress {
      flex: 1;
      line-height: 80rpx;
      background: $white;
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: $dark-6;
      margin-right: 18rpx;
    }
  }
  .icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 21rpx;
  }
  .emoji-img {
    width: 250rpx;
    height: 250rpx;
    display: inline-block;
    margin: 10rpx;
  }
  .m-l {
    margin-left: 10rpx;
  }
  .ss-text {
    margin-right: 224rpx;
  }
  .m-30 {
    // margin: 30rpx 0;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .avatar-box {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }

  .nick-name {
    font-size: 34rpx;
    font-weight: 400;
    color: #333333;
    line-height: normal;
  }

  .vip-img {
    width: 30rpx;
    height: 30rpx;
  }
  .mb-30 {
    margin-bottom: 30rpx;
  }
  .join-btn {
    width: 250rpx;
    height: 70rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: #fff;
  }
</style>
